import axios from '../../utils/http';
import React from 'react';
import Test from '../../component/echar/echar';
import { Select } from 'antd';
const { Option } = Select;
    
export default class ShouYe extends React.Component {
    constructor() {
        super();
        this.state = {
            alldata: [],
            goodtype: [],
            showtype:[],
            thetype: [],
            kucun:[]
        };
    }
    onChange=(value)=> {
        // console.log(`selected ${value}`);
        let newarr=this.state.alldata.filter(items => {
            return items.goodsRemarks===value
        })
        let thetype = [],kucun=[]
        newarr.forEach(item => {
            thetype.push(item.goodsName)
            kucun.push(item.goodsCi)
        })
        let showtype=value
        // console.log(thetype)
        // console.log(kucun)
        this.setState({
            thetype,
            kucun,
            showtype
        })
    }
    showOption = () => {
        // console.log(this.state.goodtype)
        return this.state.goodtype.map(item => {
            return <Option key={item } value={item}>{item}</Option>
        })
    }
    
    // ['肉类','水果类','蔬菜类','饮料类','奶制品','零食类'],
    render() {
        console.log(this.state.showtype)
        return (
            <div className='wrapper'>
                <Select
                    showSearch
                    style={{ width: 500, }}
                    placeholder="选择您想查看的商品种类"
                    optionFilterProp="children"
                    onChange={this.onChange}
                    filterOption={(input, option) =>
                    option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                >
                    {this.showOption()}
                </Select>,
                {/* 选择 */}
                <Test data={{
                    // xdata: ['肉类'],
                    xdata: this.state.showtype ,
                    // thetype:['猪肉','鸭肉','鱼肉','兔肉','虾','牛肉','鸡肉','羊肉'],
                    thetype:this.state.thetype,
                    ydata: {
                        // ydata1:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                        ydata1:this.state.kucun,
                    }
                }}/>
            </div>
        )
    }
    componentDidMount() {
        axios({
            url: '/mm-index/index/queryAllGoods',
            method: 'get',
        }).then(data => {
            // console.log(data.data)
            let goostypes = []
            data.data.data.forEach(item => {
                goostypes.push(item.goodsRemarks)
            })
            let goodtype = Array.from(new Set(goostypes))
            // console.log(goodtype)//不重复的种类
            // 初始化
            let newarr=data.data.data.filter(items => {
                return items.goodsRemarks===data.data.data[0].goodsRemarks
            })
            let thetype = [],kucun=[],showtype=[]
            newarr.forEach(item => {
                thetype.push(item.goodsName)
                kucun.push(item.goodsCi)
            })
            showtype.push(goodtype[0])
            this.setState({
                alldata: data.data.data,
                goodtype,
                thetype,
                kucun,
                showtype
            },)
        })
    }
}